<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- /课程列表 开始 -->
    <section class="container">
      <header class="comm-title">
        <h2 class="fl tac">
          <span class="c-333">全部课程</span>
        </h2>
      </header>
      <section class="c-sort-box">
        <!--课程类别 begin-->
        <section class="c-s-dl">
          <dl>
            <dt>
              <span class="c-999 fsize14">课程类别</span>
            </dt>
            <dd class="c-s-dl-li">
              <ul class="clearfix">
                <li>
                  <a title="全部" href="javascript:void(0);" @click="searchOne('')" :class="{active:oneIndex===-1}">全部</a>
                </li>
                <li v-for="(item,index) in subjectNestedList" v-bind:key="index" :class="{active:oneIndex===index}">
                  <a :title="item.title" href="javascript:void(0);"
                     @click="searchOne(item.id, index)">{{item.title}}</a>
                </li>
              </ul>
            </dd>
          </dl>
          <dl>
            <dt>
              <span class="c-999 fsize14"/>
            </dt>
            <dd class="c-s-dl-li">
              <ul class="clearfix">
                <li v-for="(item,index) in subSubjectList" v-bind:key="index" :class="{active:twoIndex===index}">
                  <a :title="item.title" href="javascript:void(0);"
                     @click="searchTwo(item.id, index)">{{item.title}}</a>
                </li>
              </ul>
            </dd>
          </dl>
          <div class="clear"/>
        </section>
        <!--课程类别 end-->
        <div class="js-wrap">
          <section class="fr">
            <span class="c-ccc">
              <i class="c-master f-fM">1</i>/
              <i class="c-666 f-fM">1</i>
            </span>
          </section>
          <!--课程排序 begin-->
          <section class="fl">
            <ol class="js-tap clearfix">
              <li :class="{'current bg-orange':buyCountSort!==''}">
                <a title="销量" href="javascript:void(0);" @click="searchBuyCount()">销量
                  <span :class="{hide:buyCountSort===''}">↓</span>
                </a>
              </li>
              <li :class="{'current bg-orange':gmtCreateSort!==''}">
                <a title="最新" href="javascript:void(0);" @click="searchGmtCreate()">最新
                  <span :class="{hide:gmtCreateSort===''}">↓</span>
                </a>
              </li>
              <li :class="{'current bg-orange':priceSort!==''}">
                <a title="价格" href="javascript:void(0);" @click="searchPrice()">价格&nbsp;
                  <span :class="{hide:priceSort===''}">↓</span>
                </a>
              </li>
            </ol>
          </section>
          <!--课程排序 end-->

        </div>
        <div class="mt40">
          <!-- 无数据提示 开始-->
          <section class="no-data-wrap" v-if="data.total===0">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
          </section>
          <!-- 无数据提示 结束-->


          <!-- 数据列表 开始-->
          <article v-if="data.total>0" class="comm-course-list">
            <ul id="bna" class="of">
              <li v-for="item in data.items" :key="item.id">
                <div class="cc-l-wrap">
                  <section class="course-img">
                    <img :src="item.cover" class="img-responsive" alt="听力口语">
                    <div class="cc-mask">
                      <a :href="'/course/'+item.id" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                    </div>
                  </section>
                  <h3 class="hLh30 txtOf mt10">
                    <a :href="'/course/'+item.id" :title="item.title" class="course-title fsize15">{{ item.title
                      }}</a>
                  </h3>
                  <section class="mt10 hLh20 of">
                    <span v-if="Number(item.price) === 0" class="fr jgTag bg-green">
                        <i class="c-fff fsize12 f-fA">免费</i>
                    </span>
                    <span v-else class="price fr ">￥{{item.price}}</span>
                    <!--<span class="fr jgTag bg-green" v-else>
                    <i class="c-fff fsize12 f-fA" > ￥{{item.price}}</i>
                    </span>-->
                    <span class="fl jgAttr c-ccc f-fA" style="padding: 0px 10px;">
                        <i class="c-999 f-fA">{{ item.viewCount }}人学习</i>
                        |
                        <i class="c-999 f-fA">9634评论</i>
                    </span>
                  </section>
                </div>
              </li>
            </ul>
            <div class="clear"/>
          </article>
          <!-- /数据列表 结束-->

        </div>
        <!-- 公共分页 开始 -->
        <div>
          <div class="paging">
            <!-- 添加滑动提示 -->
            <div class="swipe-hint" v-if="data.hasPrevious || data.hasNext">
              <span class="hint-text">↑↓ 滑动翻页</span>
            </div>
            
            <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
            <a
              :class="{undisable: !data.hasPrevious}"
              href="#"
              title="首页"
              @click.prevent="gotoPage(1)">首</a>
            <a
              :class="{undisable: !data.hasPrevious}"
              href="#"
              title="前一页"
              @click.prevent="gotoPage(data.current-1)">&lt;</a>
            <a
              v-for="page in data.pages"
              :key="page"
              :class="{current: data.current == page, undisable: data.current == page}"
              :title="'第'+page+'页'"
              href="#"
              @click.prevent="gotoPage(page)">{{ page }}</a>
            <a
              :class="{undisable: !data.hasNext}"
              href="#"
              title="后一页"
              @click.prevent="data.hasNext?gotoPage(data.current+1):''">&gt;</a>
            <a
              :class="{undisable: !data.hasNext}"
              href="#"
              title="末页"
              @click.prevent="gotoPage(data.pages)">末</a>
            <div class="clear"/>
          </div>
        </div>
        <!-- 公共分页 结束 -->
      </section>
    </section>
    <!-- /课程列表 结束 -->
  </div>
</template>
<script>
  import course from '@/api/course'

  export default {
    data() {
      return {
        page: 1,
        data: {},
        subjectNestedList: [], // 一级分类列表
        subSubjectList: [], // 二级分类列表
        searchObj: {}, // 查询表单对象
        oneIndex: -1,
        twoIndex: -1,
        buyCountSort: "",
        gmtCreateSort: "",
        priceSort: "",
        
        // 滑动相关数据
        touchStartY: 0,
        touchEndY: 0
      }
    },
    //加载完渲染时
    created() {
      //获取课程列表
      this.initCourse()

      //获取分类
      this.initSubject()
    },
    mounted() {
      // 添加触摸事件监听器
      this.addTouchListeners();
    },

    methods: {
      //查询课程列表
      initCourse() {
        course.getPageList(1, 8, this.searchObj).then(response => {
          this.data = response.data
          console.log(this.data)
        })
      },
      //查询所有一级分类
      initSubject() {
        ////debugger
        course.getNestedTreeList().then(response => {
          this.subjectNestedList = response.data
        })
      },

      //点击一级分类，显示对应的二级分类，查询数据
      searchOne(subjectParentId, index) {
        ////debugger
        this.oneIndex = subjectParentId?index:-1
        this.twoIndex = -1

        this.searchObj.subjectId = "";
        this.subSubjectList = [];

        this.searchObj.subjectParentId = subjectParentId;
        this.gotoPage(this.page)

        for (let i = 0; i < this.subjectNestedList.length; i++) {
          if (this.subjectNestedList[i].id === subjectParentId) {
            this.subSubjectList = this.subjectNestedList[i].children
          }
        }
      },

      //点击二级分类，查询数据
      searchTwo(subjectId, index) {
        this.twoIndex = index
        this.searchObj.subjectId = subjectId;
        this.gotoPage(this.page)
      },
      //购买量查询
      searchBuyCount() {
        this.buyCountSort = "1";
        this.gmtCreateSort = "";
        this.priceSort = "";
        this.searchObj.buyCountSort = this.buyCountSort;
        this.searchObj.gmtCreateSort = this.gmtCreateSort;
        this.searchObj.priceSort = this.priceSort;
        this.gotoPage(this.page)
      },
      //更新时间查询
      searchGmtCreate() {
        //debugger
        this.buyCountSort = "";
        this.gmtCreateSort = "1";
        this.priceSort = "";
        this.searchObj.buyCountSort = this.buyCountSort;
        this.searchObj.gmtCreateSort = this.gmtCreateSort;
        this.searchObj.priceSort = this.priceSort;
        this.gotoPage(this.page)
      },
      //价格查询
      searchPrice() {
        this.buyCountSort = "";
        this.gmtCreateSort = "";
        this.priceSort = "1";
        this.searchObj.buyCountSort = this.buyCountSort;
        this.searchObj.gmtCreateSort = this.gmtCreateSort;
        this.searchObj.priceSort = this.priceSort;
        this.gotoPage(this.page)
      },
      //分页查询
      gotoPage(page) {
        this.page = page
        course.getPageList(page, 8, this.searchObj).then(response => {
          this.data = response.data
        })
      },
      
      // 添加触摸事件监听器
      addTouchListeners() {
        const pagingElement = document.querySelector('.paging');
        if (pagingElement) {
          pagingElement.addEventListener('touchstart', this.handleTouchStart, { passive: true });
          pagingElement.addEventListener('touchend', this.handleTouchEnd, { passive: true });
        }
      },
      
      // 处理触摸开始事件
      handleTouchStart(event) {
        this.touchStartY = event.touches[0].clientY;
      },
      
      // 处理触摸结束事件
      handleTouchEnd(event) {
        this.touchEndY = event.changedTouches[0].clientY;
        this.handleSwipe();
      },
      
      // 处理滑动逻辑
      handleSwipe() {
        const swipeThreshold = 50; // 滑动阈值
        const deltaY = this.touchStartY - this.touchEndY;
        
        // 向上滑动，下一页
        if (deltaY > swipeThreshold && this.data.hasNext) {
          this.gotoPage(this.data.current + 1);
        }
        // 向下滑动，上一页
        else if (deltaY < -swipeThreshold && this.data.hasPrevious) {
          this.gotoPage(this.data.current - 1);
        }
      }
    }
  };
</script>
<style scoped>
  .active {
    color: #fff;
    background: #333;
    border-radius: 6px;
  }
  .active a,.active a:hover {
    color: #fff;
  }
  .hide {
    display: none;
  }

  .show {
    display: block;
  }
  
  /* 分页组件样式 */
  .paging {
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
  }
  
  .swipe-hint {
    text-align: center;
    margin-bottom: 10px;
  }
  
  .hint-text {
    background-color: #f0f0f0;
    color: #666;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
  }
  
  .paging a {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 2px;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-decoration: none;
    color: #333;
  }
  
  .paging .current {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
  }
  
  .paging .undisable {
    color: #ccc;
    cursor: not-allowed;
  }
  
  .paging .undisable:hover {
    background-color: transparent;
    color: #ccc;
  }

  /* 电脑端课程类别样式 */
  .c-s-dl {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .c-s-dl dl {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
  }
  
  .c-s-dl dt {
    width: 100px;
    padding-top: 5px;
  }
  
  .c-s-dl dd {
    flex: 1;
  }
  
  .c-s-dl dd ul {
    display: flex;
    flex-wrap: wrap;
  }
  
  .c-s-dl dd li {
    margin-right: 15px;
    margin-bottom: 10px;
  }
  
  .c-s-dl dd li a {
    display: block;
    padding: 6px 12px;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .c-s-dl dd li a:hover,
  .c-s-dl dd li.active a {
    background: #00aaff;
    color: #fff;
    border-color: #00aaff;
  }
  
  /* 电脑端排序按钮样式 */
  .js-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .js-tap {
    display: flex;
    list-style: none;
  }
  
  .js-tap li {
    margin-right: 10px;
  }
  
  .js-tap li a {
    display: block;
    padding: 8px 16px;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .js-tap li a:hover,
  .js-tap li.current a {
    background: #ff9900;
    color: #fff;
    border-color: #ff9900;
  }
  
  .js-tap li.current a {
    background: #ff9900;
    color: #fff;
  }
  
  .js-tap span {
    margin-left: 5px;
  }
  
  /* 课程类别移动端适配样式 */
  @media (max-width: 768px) {
    .c-s-dl dl {
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
    }
    
    .c-s-dl dt {
      margin-bottom: 10px;
    }
    
    .c-s-dl dd {
      width: 100%;
    }
    
    .c-s-dl dd ul {
      display: flex;
      flex-wrap: wrap;
    }
    
    .c-s-dl dd li {
      margin-right: 10px;
      margin-bottom: 10px;
    }
    
    .c-s-dl dd li a {
      padding: 5px 10px;
      font-size: 14px;
    }
    
    .js-wrap {
      display: flex;
      flex-direction: column;
    }
    
    .js-wrap .fl,
    .js-wrap .fr {
      order: 2;
      margin-bottom: 10px;
    }
    
    .js-tap {
      order: 1;
      margin-bottom: 15px;
    }
    
    .js-tap li {
      margin-right: 5px;
    }
    
    .js-tap li a {
      font-size: 14px;
      padding: 5px 10px;
    }
  }
  
  @media (max-width: 480px) {
    .c-s-dl dd li {
      margin-right: 5px;
      margin-bottom: 5px;
    }
    
    .c-s-dl dd li a {
      padding: 3px 8px;
      font-size: 12px;
    }
    
    .js-tap li a {
      font-size: 12px;
      padding: 3px 8px;
    }
  }
</style>
